<template>
    <div class="activityList">
        <div class="list" @scroll="handleScroll">
            <template v-if="list.length > 0">
                <div class="list_item" v-for="(item, index) in list" :key="index">
                    <div class="title">
                        <div class="title_content">{{ item.title }}</div>
                        <div class="tag">
                            <div v-if="item.verify == 2" class=" tag1">未通过</div>
                            <div v-else-if="item.verify == 1" class=" tag2">已通过</div>
                            <div v-else class=" tag3">待审核</div>
                        </div>
                    </div>
                    <div class="hotel">{{ item.hotel }}</div>
                    <div class="time">
                        <img src="@/assets/time.png" alt="" />
                        <div>{{ item.start_time.slice(0, 10) }} ~ {{ item.end_time.slice(0, 10) }}</div>
                    </div>
                    <div class="image" v-if="item.image" @click="previewLargeImage(item.image)">
                        <img src="@/assets/img.png" alt="" />
                        <div>查看大图</div>
                    </div>
                    <div class="pdf" v-if="item.pdf" @click="previewLargePdf(item.pdf)">
                        <img src="@/assets/pdf.png" alt="" />
                        <div>{{ item.pdf_name }}</div>
                    </div>
                    <div class="huifu" v-if="item.replay">
                        <div class="label">回复：</div>
                        <div class="desc">
                            <div
                                class="desc_content"
                                :class="{ collapsed: item.isCollapsed, expanded: !item.isCollapsed }"
                                :ref="`descContent_${index}`"
                            >
                                {{ item.replay }}
                            </div>
                            <div class="toggle-btn" v-if="item.showToggleBtn" @click="toggleContent(index)">
                                <img :class="{ rotated: !item.isCollapsed }" src="@/assets/xiajiantou.png" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="eity" v-else>没有更多数据了</div>
        </div>
        <div class="btn-wrapper">
            <div class="btn" @click="goReturn">返回</div>
        </div>
    </div>
</template>

<script>
import { Toast, ImagePreview } from "vant";
export default {
    name: "newActivityList",
    data() {
        return {
            list: [], //列表数据
            page: 1, //页数
            total: 0, //总数
        };
    },
    async mounted() {
        //获取数据
        await this.getList();
        //计算是否显示展开/收起按钮
        await this.checkOverflowForAll();
    },
    methods: {
        goReturn() {
            this.$router.go(-1);
        },
        //预览大图
        previewLargeImage(url) {
            ImagePreview({ images: [url], closeable: true });
        },
        //查看pdf
        previewLargePdf(url) {
            this.$router.push({
                path: "/seePdf",
                query: {
                    pdf: JSON.stringify({
                        title: "",
                        pdf_url: url,
                    }),
                },
            });
        },
        //获取数据
        async getList() {
            let t = Toast.loading({
                message: "加载中...",
                forbidClick: true,
                duration: 0,
            });
            try {
                let res = await this.$api.activities({ page: this.page, type: 1 });
                console.log(res);
                if (res.status_code != 200) {
                    Toast(res.message);
                    return;
                }
                // 为每个列表项添加展开/收起状态
                res.data.data.forEach((item) => {
                    item.isCollapsed = true;
                    item.showToggleBtn = false;
                });

                this.list = res.data.data;
                this.total = res.data.total;
                t.clear();
            } catch (e) {
                t.clear();
            }
        },

        //列表滚动到底加载下一页
        handleScroll(e) {
            const scrollTop = e.target.scrollTop;
            const scrollHeight = e.target.scrollHeight;
            const clientHeight = e.target.clientHeight;
            if (scrollTop + clientHeight >= scrollHeight) {
                if (this.page < Math.ceil(this.total / 10)) {
                    this.page++;
                    this.getList();
                } else {
                    Toast.success({
                        message: "没有更多了",
                        duration: 1500,
                    });
                }
            }
        },

        //点击行数据展开/收起
        toggleContent(index) {
            this.list[index].isCollapsed = !this.list[index].isCollapsed;
        },
        //计算每项是否显示展开/收起按钮
        checkOverflowForAll() {
            this.list.forEach((item, index) => {
                this.$nextTick(() => {
                    const contentEl = this.$refs[`descContent_${index}`] ? this.$refs[`descContent_${index}`][0] : null;
                    if (contentEl) {
                        const lineHeight = parseInt(window.getComputedStyle(contentEl).lineHeight);
                        const maxHeight = lineHeight * 1.1; // 1行的高度
                        this.list[index].showToggleBtn = contentEl.scrollHeight > maxHeight;
                    }
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.activityList {
    height: 100vh;
    background-color: #ebf1f4;
    position: relative;
    z-index: 2;

    .list {
        width: 100%;
        height: calc(100vh - 2.1333rem);
        overflow-y: scroll;
        padding: 0.2667rem;

        .list_item {
            width: 100%;
            background-color: #fff;
            border-radius: 0.4rem;
            margin-bottom: 0.2667rem;
            padding: 0.5333rem 0.4rem;

            .title {
                display: flex;
                align-items: center;

                .title_content {
                    flex: 1;
                    font-weight: bold;
                    font-size: 0.5333rem;
                    color: #1f4456;
                }

                .tag {
                    width: 1.6rem;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                }

                .tag1 {
                    width: 1.12rem;
                    height: 0.48rem;
                    background: #ffefeb;
                    border-radius: 0.1067rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    color: #e8542c;
                    text-align: center;
                    line-height: 0.48rem;
                }
                .tag2 {
                    width: 1.12rem;
                    height: 0.48rem;
                    background: #ebf3ff;
                    border-radius: 0.1067rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    color: #5d7c8c;
                    text-align: center;
                    line-height: 0.48rem;
                }
                .tag3 {
                    width: 1.12rem;
                    height: 0.48rem;
                    background: #f2f3f5;
                    border-radius: 0.1067rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    color: #a1adb3;
                    text-align: center;
                    line-height: 0.48rem;
                }
            }

            .hotel {
                font-weight: bold;
                font-size: 0.4267rem;
                color: #1f4456;
                margin-top: 0.4rem;
            }

            .time {
                display: flex;
                align-items: center;
                margin-top: 0.4rem;
                font-weight: 500;
                font-size: 0.3733rem;
                color: #808080;
                img {
                    width: 0.3467rem;
                    height: 0.3467rem;
                    margin-right: 0.0667rem;
                }
            }

            .image,
            .pdf {
                display: flex;
                align-items: center;
                margin-top: 0.4rem;
                font-weight: 500;
                font-size: 0.32rem;
                color: #3a74df;
                img {
                    width: 0.3467rem;
                    height: 0.3467rem;
                    margin-right: 0.0667rem;
                }
            }

            .huifu {
                margin-top: 0.4rem;
                .label {
                    font-weight: 500;
                    font-size: 0.3733rem;
                    color: #808080;
                    margin-bottom: 0.2667rem;
                }

                .desc {
                    display: flex;
                    padding: 0.2933rem;
                    min-height: 0.9867rem;
                    background: #f5f8fa;
                    border-radius: 0.2667rem;
                    border: 1px solid #dadce0;
                    flex-direction: column;

                    .desc_content {
                        font-weight: 500;
                        font-size: 0.3733rem;
                        color: #1e1e1e;
                        overflow: hidden;
                        line-height: 1.5;
                        position: relative;
                    }

                    .desc_content.collapsed {
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }

                    .desc_content.expanded {
                        max-height: none;
                    }

                    .toggle-btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-top: 0.2rem;
                    }

                    .toggle-btn img {
                        width: 0.2667rem;
                        height: 0.1733rem;
                        transition: transform 0.3s ease;
                    }

                    .toggle-btn img.rotated {
                        transform: rotate(180deg);
                    }
                }
            }
        }

        .eity {
            text-align: center;
            font-size: 0.32rem;
            color: #999999;
            padding: 0.2667rem;
        }
    }

    .btn-wrapper {
        width: 100%;
        height: 2.1333rem;
        background-color: #fff;
        padding: 0.2667rem 0.4rem 0 0.4rem;

        .btn {
            width: 100%;
            height: 1.2rem;
            background: #2a4347;
            border-radius: 0.2667rem;
            border: 1px solid #cdcdcd;
            font-weight: 500;
            font-size: 0.4267rem;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
